<template>
	<div class="section section-base page_6">
		<div class="flex-start font30" style="padding-top: 20px;">
			<count-to :startVal="0" :endVal="detailData.total" :duration="3000"></count-to>
			<div>个</div>
		</div>
		<div class="font16" id="maintainDes">
			全年共完成维保任务{{detailData.total}}个
		</div>
		<animation-text :text="animationText"></animation-text>
		<div class="font14 flex-start" style="margin-bottom: 20px;margin-top:20px">
			<div style="margin-right: 100px;">
				<div class="flex-start">
					<count-to class="font24" :startVal="0" :endVal="detailData.inspectCount" :duration="3000"></count-to>
					<div>个</div>
				</div>
				<div>维保巡查</div>
			</div>
			<div>
				<div class="flex-start">
					<count-to class="font24" :startVal="0" :endVal="detailData.maintainCount" :duration="3000"></count-to>
					<div>个</div>
				</div>
				<div>保养</div>
			</div>
		</div>
		<div class="font14">
			<div>
				<div>
					<div class="flex-start">
						<count-to class="font24" :startVal="0" :endVal="detailData.singleTestCount" :duration="3000"></count-to>
						<div>个</div>
					</div>
					<div>单点测试</div>
				</div>
				<div>
					<div class="flex-start">
						<count-to class="font24" :startVal="0" :endVal="detailData.testCount" :duration="3000"></count-to>
						<div>个</div>
					</div>
					<div>联动测试</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		reportData: {
			type: Object,
			default: function () {
				return {
					joinTime: {},
				}
			},
		},
		active: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			detailData: {
				total: 0,
				inspectCount: 0,
				maintainCount: 0,
				singleTestCount: 0,
				testCount: 0,
			},
			animationText: '',
		}
	},
	watch: {
		active(val) {
			if (val) {
				this.$nextTick(() => {
					this.init()
				})
			}
		},
	},
	methods: {
		init() {
			this.animationText = '定期安排维保任务，可以更有效地保障单位安全！'
			this.detailData = this.reportData.maintain
		},
	},
	mounted() {},
}
</script>